    	
$(document).ready(function(){
	
	/**
	 * Login/inscription d'un utilisateur via Facebook Connect
	 */
    $('.fb-login').click(function(e){
        e.preventDefault();
        // Appel de la fonction de login du SDK Facebook
        FB.login(function(response) {console.log(response);
        	// Si on a eu une réponse...
            if (response.authResponse) {
            	/*
            	 * On récupère l'access token qui nous permettra de publier sur le mur de l'utilisateur 
            	 * sans avoir à lui redemander la permission
            	 */
                var access_token = response.authResponse.accessToken;
                
                // Appel de l'API Facebook pour récupérer les informations de l'utilisateur
                FB.api('/me', function(response) {
                	// Ajout du token récupéré precedemment à la réponse
                	response.facebook_token = access_token;
                	
                	// Envoie des données de l'utilisateur à notre controleur pour connecter/inscrire l'utilisateur
                    $.ajax({
                        url:'/bitstrip/facebooklogin',
                        type:'POST',
                        data:response,
                        success:function(javaresponse){
                        	// Une fois les données traitées nous récupérons la réponse du contrôleur
                        	var jsonresponse = $.parseJSON(javaresponse);
                        	/*
                        	 * Si l'utilisateur était déjà inscrit on le connecte en remplissant les champs de la page de login
                        	 * et en soumettant automatiquement le formulaire
                        	 */ 
                        	if (jsonresponse.fb_isnew == "false"){
	                        	$('input[type="text"]').val(jsonresponse.email);
	                        	$('input[type="password"]').val(jsonresponse.password);
	                        	$('.validate-btn').click();
                        	}
                        	else{ 
                        		/*
                        		 * Si l'utilisateur n'était pas inscrit, on le redirige sur la page d'inscription 
                        		 * dont les champs auront été pré-remplis à partir de son profil Facebook
                        		 */ 
                        		location.href="/bitstrip/inscription/fromfacebook";
                        	}
                        }
                    });
                });
            }
            else {
            	$('.message-box').addClass('error show').html("Vous devez autoriser l'application pour vous connecter avec Facebook");
            }
        },{scope:'email,publish_stream,user_photos'}); 
    });
    
    /**
     * Gestion de l'effet "hover" sur les résultats de recherche de fond
     */
    $('.home-container .background-item').hover(function(){
    	$('.home-container .background-item .background-item-overlay').addClass('active');
    	$(this).find('.background-item-overlay').removeClass('active');    	 
    },function(){
    	$('.home-container .background-item .background-item-overlay').removeClass('active');
    	
    });
   
    
    /**
     * Envoi des informations sur l'image finale que l'utilisateur souhaite créer
     */
    $('.creation-submit').click(function(){
    	
    	// Création de l'objet contenant toutes les données nécessaires
    	var finalImageInformations = {
    		'nb_persons':parseInt($('#nb-persons option:selected').val()),
    		'avatar':[],
    		'bulle':[],
    		'background_width':parseInt($('.creation-zone').css('width')),
    		'background_height':parseInt($('.creation-zone').css('height')),
    		'background_img':$('.creation-zone').data('bg-id'),
    		'legend':encodeURIComponent($('.creation-legend').val())
    	};
    	
    	// Ajout des avatars
    	$('.avatar').each(function(){
	    	finalImageInformations.avatar.push({
	    		'utilisateur':$(this).data('utilisateur-id'),
	    		'img':$(this).data('avatar-id'),
				'x':parseInt($(this).css('left'))-22,
		    	'y':parseInt($(this).css('top'))-21,
		    	'width':parseInt($(this).css('width')),
		    	'height':parseInt($(this).css('height'))
	    	});
    	});
    	
    	// Ajout des bulles
    	$('.bulle').each(function(){
	    	finalImageInformations.bulle.push({
	    		'img':$(this).data('bg-url'),
				'x':parseInt($(this).css('left'))-22,
	    		'y':parseInt($(this).css('top'))-21,
	    		'width':parseInt($(this).css('width')),
	    		'height':parseInt($(this).css('height')),
	    		'text':{
	    			'x':(parseInt($(this).css('left'))-22) + (parseInt($(this).find('textarea').css('margin-left'))),
		    		'y':(parseInt($(this).css('top'))-21) + (parseInt($(this).find('textarea').css('margin-top'))),
		    		'width':parseInt($(this).find('textarea').css('width')),
		    		'height':parseInt($(this).find('textarea').css('height')),
		    		'content':encodeURIComponent($(this).find('textarea').val())
	    		}
	    	});
    	});
    	
    	// Envoi des informations au controleur au format JSON
    	$.ajax({
            url:'/bitstrip/createfinalimage',
            type:'POST',
            data:'jsoninfos='+JSON.stringify(finalImageInformations),
            dataType:'JSON',
            success:function(jsonresponse){
        		$('.page-overlay-dark').animate({'opacity':'0'},1000);
            	// Mise en place de la page de visualisation de l'image finale...
            	$('.save-creation .creation-image img').attr('src','http://localhost:8080/bitstrip/'+jsonresponse.finalimagepath);
            	$('.save-creation .download-button').attr('href','http://localhost:8080/bitstrip/download/?image=http://localhost:8080/bitstrip/'+jsonresponse.finalimagepath);
            	$('.save-creation .facebook-share-button').data('filename',jsonresponse.filename);	
            	$('.save-creation .facebook-share-button').data('base64img',encodeURIComponent(jsonresponse.base64img));
            	
            	saveAnimation();
            }
        });
    });
    
    /**
     * Suppression d'une bulle
     */
    $(document).on( "click", '.bulle-delete',function(){
    	$(this).parent().remove();
    });
    
    /**
     * Rotation d'une bulle (droite/gauche)
     */
    $(document).on( "click", '.bulle-rotate',function(){ 
    	if ($(this).parent().hasClass('bulle-left')){
	    	$(this).parent().attr('data-bg-url','http://localhost:8080/bitstrip/assets/img/bulle-right.png');
	    	$(this).parent().css('background',"url('/bitstrip/assets/img/bulle-right.png')");
	    	$(this).parent().removeClass('bulle-left');
	    	$(this).parent().addClass('bulle-right');
    	}else{
    		$(this).parent().data('bg-url','http://localhost:8080/bitstrip/assets/img/bulle-left.png');
	    	$(this).parent().css('background',"url('/bitstrip/assets/img/bulle-left.png')"); 
	    	$(this).parent().removeClass('bulle-right');
	    	$(this).parent().addClass('bulle-left');
    	}
    });
 
    /**
     * Ajout d'une nouvelle bulle
     */
    $(document).on( "click", '.bulle-add',function(e){
    	e.stopPropagation();
    	$('.creation-zone').append('<div class="bulle bulle-left" data-bg-url="http://localhost:8080/bitstrip/assets/img/bulle-left.png" style="background:url(\'/bitstrip/assets/img/bulle-left.png\');"><textarea></textarea><span class="bulle-delete"></span><span class="bulle-rotate"></span></div>');
    	draggableBulle();
    });
    
    /**
     * Gestion de l'affichage/masquage de la liste de choix d'une personne pour un avatar
     */
    $(document).on( "click", '.avatar', function(e){
    	if ($(e.target).hasClass('creation-persons-finder-input')) return;
    	
    	if (!$(this).hasClass('persons-searching')){
    		$(this).resizable("destroy");
	    	$(this).addClass('persons-searching');
	    	$(this).append('<div class="creation-persons-finder-injected" data-avatar="' + $(this).attr('id') + '">' + $('.creation-persons-finder-injected').html() + '</div>');
	    	if (parseInt($(this).css('left')) > (100 + $(this).width() + $('.avatar .creation-persons-finder-injected').width()))
	    		$(this).find('.creation-persons-finder-injected').addClass('to-the-left');
	    	else
	    		$(this).find('.creation-persons-finder-injected').css('margin-left',parseInt(parseInt($(this).css('width')) + 5) + 'px');
	    	$(this).find('.creation-persons-finder-injected').fadeIn(500);
    	}
    	else{
    		$(this).removeClass('persons-searching');
    		$(this).find('.creation-persons-finder-injected').remove();
    		$(this).resizable({
    	    	containment:".creation-zone",
    	    	aspectRatio:0.8
    	    });
    	}
    });
    
    /**
     * Modification de l'image de l'avatar pour celui sélectionné par l'utilisateur dans la liste des personnes
     */
    $(document).on( "click", ".creation-persons-finder-injected ul li",function(e){
    	var avatar = $(this).parent().parent().parent().data('avatar');
    	var newimg = $(this).find('img').attr('src');
    	
    	$('#' + avatar).data('bg-url','http://localhost:8080' + newimg); 
    	$('#' + avatar).data('avatar-id',$(this).data('avatar-id'));  
    	$('#' + avatar).data('utilisateur-id',$(this).data('utilisateur-id')); 
    	$('#' + avatar).css('background',"url('" + newimg + "')");
    	
    	$('.creation-persons-finder-injected ul li').css('display','block');
    }); 
    
    $(document).on( "keyup", ".creation-persons-finder-input",function(){
    	var _this = $(this);
    	if (_this.val() == "") 
    		$('.creation-persons-finder-injected ul li').css('display','block');
    	else{
	    	$('.creation-persons-finder-injected ul li').each(function(){
	    		if ($(this).data('prenom').toLowerCase().indexOf(_this.val().toLowerCase()) < 0)
	    			$(this).css('display','none');
	    		else
	    			$(this).css('display','block');
	    	});
    	}
    });

    /**
     * Partage de l'image finale sur Facebook
     */
    $('.facebook-share-button').click(function(e){
    	e.preventDefault();
    	var user_fb_id = $(this).data('user-fb-id');
    	var user_fb_token = $(this).data('fb-token');
    	
    	if (user_fb_id == ""){
    		/*
    		 * Partage sur Facebook de façon classique si l'utilisateur
    		 * ne s'est pas connecté via Facebook
    		 */
    		$.ajax({
                url:'http://vds1454.sivit.org/samy_bitstrips/converter.php',
                type:'POST',
                data:"filename="+$(this).data('filename')+"&token=1cb8296a814041a8e16c0fda1d4d6930741c8371853072f6b3a3944b89c0bcc278cc36711b806fa7&base64img="+$(this).data('base64img'),
                success:function(apiresponse){  
                	var jsonresponse = $.parseJSON(apiresponse);
                	
                	if (jsonresponse.fileurl == 'error_1' || jsonresponse.fileurl == 'error_2'){
                		$('.message-box').removeClass('normal');
		    			$('.message-box').addClass('error');
		    			$('.message-box').html('[1454 IMG HOST API] Erreur lors de la création de l\'image ('+jsonresponse.fileurl+')');
			    		$('.message-box').slideDown();
			    		setTimeout(function(){
			    			$('.message-box').css('display','none');
			    		},5000);
			    		
			    		return false;
                	}
                	
			    	FB.ui({
			    		method:"feed",
			    		display:"popup",
			    		picture:jsonresponse.fileurl,
			    		name:'Ma création Bitstrip(s) !',
			    		actions:{name:'Découvrir Bitstrip(s)',link:'http://localhost:8080/bitstrip/'},
			    		caption: 'Bitstrip(s)',
			    		link:jsonresponse.fileurl
			    	},function(post_id){
			    		if (post_id != null){
			    			$('.message-box').html('Votre création a bien été partagée sur Facebook !');
				    		$('.message-box').slideDown();
				    		setTimeout(function(){
				    			$('.message-box').css('display','none');
				    		},2000);
			    		}
			    	});
                }
    		});
    	}else{ 
    		/*
    		 * Partage sur Facebook en ajoutant l'image crée à l'album Facebook de l'utilisateur
    		 * (cela necessite le token de l'utilisateur)
    		 */
    		
    		$('.message-box').addClass('normal');
    		$('.message-box').html('Veuillez patienter, partage sur Facebook en cours...');
    		$('.message-box').slideDown();
    		
    		$.ajax({
                url:'http://vds1454.sivit.org/samy_bitstrips/converter.php',
                type:'POST',
                data:"filename="+$(this).data('filename')+"&token=1cb8296a814041a8e16c0fda1d4d6930741c8371853072f6b3a3944b89c0bcc278cc36711b806fa7&base64img="+$(this).data('base64img'),
                success:function(apiresponse){                	
                	
                	var jsonresponse = $.parseJSON(apiresponse);
                	
                	if (jsonresponse.fileurl == 'error_1' || jsonresponse.fileurl == 'error_2'){
                		$('.message-box').removeClass('normal');
		    			$('.message-box').addClass('error');
		    			$('.message-box').html('[1454 IMG HOST API] Erreur lors de la création de l\'image ('+jsonresponse.fileurl+')');
			    		$('.message-box').slideDown();
			    		setTimeout(function(){
			    			$('.message-box').css('display','none');
			    		},5000);
			    		
			    		return false;
                	}
                	
		    		FB.api("/"+user_fb_id+"/photos","post",{
		    			access_token:user_fb_token, 
		    			url:jsonresponse.fileurl
		    		},function(post_id){
		    			console.log(post_id);
			    		if (post_id != null && (post_id.error == null || post_id.error == undefined)){
			    			$('.message-box').removeClass('error normal');
			    			$('.message-box').html('Votre création a bien été partagée sur Facebook !');
				    		$('.message-box').slideDown();
				    		setTimeout(function(){
				    			$('.message-box').css('display','none');
				    		},2000);
			    		}
			    		else if (post_id.error != null || post_id.error != undefined){
			    			$('.message-box').removeClass('normal');
			    			$('.message-box').addClass('error');
			    			$('.message-box').html('Erreur lors de l\'envoi sur Facebook :<br/> ' + post_id.error.message);
				    		$('.message-box').slideDown();
				    		setTimeout(function(){
				    			$('.message-box').css('display','none');
				    		},5000);
			    		}
			    	});
                }
    		});
    	}
    });
    
    /**
     * Téléchargement de l'image finale
     */
    $('.download-button').click(function(e){
    	e.preventDefault();
    	$('#iframe-download').remove();
    	$('body').append('<iframe id="iframe-download" style="display:none" src="'+$(this).attr('href')+'"></iframe>');
    });
    
    /**
     * Gestion de la sélection des mots clefs dans la configuration
     */
    $('.config-keyword-selector select').change(function(){
    	if ($(".config-keyword-selector select option:selected").val() != ""){
	    	$('.config-selected-keyword').css('display','block');
	    	$('.config-selected-keyword').data('nbadded',parseInt($('.config-selected-keyword').data('nbadded'))+1);
	    	$('.config-selected-keyword').append('<div class="config-keyword" data-value="'+$(".config-keyword-selector select option:selected").val()+'"><span class="config-label-keyword">'+$(".config-keyword-selector select option:selected").html()+'</span><span class="config-delete-keyword">x</span></div>');
	    	$(".config-keyword-selector select option:selected").attr('style','display:none;');
	    	$(".config-keyword-selector select option[value='']").attr('selected','selected');
    	}
    });
    
    /**
     * Gestion de la suppression d'un mot clef precedemment sélectionné dans la configuration
     */
    $(document).on( "click", ".config-delete-keyword",function(e){
    	$(".config-keyword-selector select option[value='"+$(this).parent().data('value')+"']").attr('style','');
    	$(this).parent().remove();

    	$('.config-selected-keyword').data('nbadded',parseInt($('.config-selected-keyword').data('nbadded'))-1);
    	if ($('.config-selected-keyword').data('nbadded') == "0" || $('.config-selected-keyword').data('nbadded') == 0)
    		$('.config-selected-keyword').css('display','none');
    });
    
    /**
     * Recherche des fonds correspondant aux critères
     */
    $('.config-btn-show-backgrounds').click(function(){
    	$('.config-expand-toggle').css('display','none');
    	
    	var configDatas = {
    		'nbpersons':$('.config-nb-persons-selector select option:selected').val(),
    		'theme':$('.config-theme-selector select option:selected').val(),
    		'keywords':[]
    	};
    	
    	$('.config-selected-keyword .config-keyword').each(function(){
    		configDatas.keywords.push({
    			'keyword':$(this).data('value')
    		});
    	});
    	
    	$.ajax({
            url:'/bitstrip/searchbackgrounds',
            type:'POST',
            data:'jsoninfos='+JSON.stringify(configDatas),
            dataType:'JSON',
            success:function(jsonresponse){ 
            	if (Object.keys(jsonresponse).length > 0)
            		$('.background-list').html('');
            	$.each(jsonresponse, function(i,item){
	            	$('.background-list').append('<div class="background-item"> '
						+ '<div class="background-item-image" data-bg-nbpersons="'+configDatas.nbpersons+'" data-bg-id="'+item+'" data-bg-path="fond?id='+item+'" style="background:url(\'fond?id='+item+'\');"> '
						+ '<div class="background-item-overlay"></div> '
						+ '<div class="background-item-choice"><img src="/bitstrip/assets/img/check.png" /></div>' 
						+ '</div>'
					+ '</div>');
            	});
            }
    	});
    	
    	$('.backgrounds-collection').removeClass('placeholder').css('display','block');
    	$('.creation').css('display','none');
    });
    
    /**
     * Choix d'un fond et affichage de la zone de création
     */
    $(document).on('click','.background-list .background-item', function(){
    	$('.config-expand-toggle').click();
    	$('.config-expand-toggle').css('display','block');
    	$('.backgrounds-collection').addClass('placeholder').css('display','none');
    	$('.creation').css('display','block');
    	var nbpersons = $(this).find('.background-item-image').data('bg-nbpersons');
    	var i;
    	for (i=1;i<=nbpersons;i++){
    		$('.creation .creation-zone').append('<div class="avatar" data-utilisateur-id="" data-avatar-id="" id="avatar_'+i+'" data-bg-url="http://localhost:8080/bitstrip/assets/img/default-avatar.png" style="background:url(\'/bitstrip/assets/img/default-avatar.png\');"> '
				+ '<span class="bulle-add"></span>'
			+ '</div>');
    		 
    	    /**
    	     * Ajout de la fonctionnalité de déplacement / redimensionnement des avatars (basé sur jQuery UI draggable/resizable)
    	     */
    	    draggableAvatar();
    	    
    	    /**
    	     * Ajout de la fonctionnalité de déplacement / redimensionnement des bulles (basé sur jQuery UI draggable/resizable)
    	     */
    	    draggableBulle();
    	}
    	$('.creation .creation-zone').data('bg-id', $(this).find('.background-item-image').data('bg-id'));
    	$('.creation .creation-zone').data('bg-url', $(this).find('.background-item-image').data('bg-path'));
    	$('.creation .creation-zone').css('background',"url('"+$(this).find('.background-item-image').data('bg-path')+"')"); 
    });
    
    $('.config-expand-toggle').click(function(){
    	var _this = this;
    	if ($(this).hasClass('expanded')){
    		$('.page-overlay-dark').animate({'opacity':'1'},1000);
	    	$('.configuration').animate({'margin-left':'80px'},1000);
	    	$('.backgrounds-collection,.creation').animate({'margin-left':'80px'},1000,function(){
		    	$(_this).removeClass('expanded').addClass('retracted');
	    	});
	    	
    	}else{
    		$('.page-overlay-dark').animate({'opacity':'0'},1000);
    		$('.configuration').animate({'margin-left':'19px'},1000);
	    	$('.backgrounds-collection,.creation').animate({'margin-left':'192px'},1000,function(){
		    	$(_this).removeClass('retracted').addClass('expanded');
	    	});
    	}
    });
});

/**
 * Animation de l'affichage de l'image finale
 */
function saveAnimation(){
	$('.page-overlay').fadeIn(800,function(){  
		$('.save-creation').delay(400).fadeIn(2000);
	});
}

/**
 * Déplacement/redimensionnement des bulles
 * jQuery UI (http://api.jqueryui.com/draggable/ http://api.jqueryui.com/resizable/)
 */
function draggableBulle(){
	$('.creation-zone .bulle').draggable({
    	containment:".creation-zone",
    	scroll:false
    }).resizable({
    	containment:".creation-zone",
    	aspectRatio:1.6,
    	resize:function(){
    		// Gestion du redimensionnement du champ texte permettant d'écrire dans la bulle
    		var baseWidth = 144;
    		var baseHeight = 90;
    		var baseTextareaWidth = 100;
    		var baseTextareaHeight = 41;
    		var baseTextareaMT = 28;
    		var baseTextareaML = 28;
    		
    		var newBulleWidth = parseInt($(this).css('width'));
    		var newBulleHeight = parseInt($(this).css('height'));
    		var newTextareaWidth = parseInt(newBulleWidth*(baseTextareaWidth/baseWidth));
    		var newTextareaHeight = parseInt(newBulleHeight*(baseTextareaHeight/baseHeight));
    		var newTextareaMT = parseInt(newTextareaHeight*(baseTextareaMT/baseHeight));
    		var newTextareaML = parseInt(newTextareaWidth*(baseTextareaML/baseWidth));
    		
    		$(this).find('textarea').css({
    			'width':newTextareaWidth+'px',
    			'height':newTextareaHeight+'px',
    			'margin-top':newTextareaMT+'px',
    			'margin-left':newTextareaML+'px'
    		});
    	}
    });
	
	
}

/**
 * Déplacement/redimensionnement des avatars
 * jQuery UI (http://api.jqueryui.com/draggable/ http://api.jqueryui.com/resizable/)
 */
function draggableAvatar(){
	$('.creation-zone .avatar').draggable({
    	containment:".creation-zone",
    	scroll:false,
    	drag:function(){
    		if (parseInt($(this).css('left')) > (100 + $(this).width() + $(this).find('.creation-persons-finder-injected').width()))
    			$(this).find('.creation-persons-finder-injected').addClass('to-the-left');
        	else{
        		$(this).find('.creation-persons-finder-injected').removeClass('to-the-left');
        		$(this).find('.creation-persons-finder-injected').css('margin-left',parseInt(parseInt($(this).css('width')) + 5) + 'px');
        	}
    	}
    }).resizable({
    	containment:".creation-zone",
    	aspectRatio:0.8
    });
}